<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Verify Utils</title>
    <link rel="stylesheet" href="https://bootswatch.com/4/cosmo/bootstrap.min.css">
    <style>
        .jumbotron-heading a {
            display: inline-block;
            padding: 3px 8px;
            border: 2px solid #2780E3 !important;
            position: relative;
        }

        .jumbotron-heading a::before,
        .jumbotron-heading a::after {
            content: '';
            display: block;
            width: 95%;
            height: 4px;
            position: absolute;
            top: -2.75px;
            background-color: #e9ecef;
            left: 50%;
            transform: translateX(-50%);
            transition: all .3s;
        }

        .jumbotron-heading a::after {
            top: unset;
            bottom: -2.75px;
            background-color: #e9ecef;
        }

        .jumbotron-heading a:hover {
            text-decoration: none;
        }

        .jumbotron-heading a:hover::before,
        .jumbotron-heading a:hover::after {
            width: 0;
        }

        .form-control:focus,
        .form-control.focus,
        .btn:focus,
        .btn.focus {
            box-shadow: none !important;
        }

        .input-group-append {
            margin-left: 1px;
        }

        .input-group-text {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <main role="main">
        <section class="jumbotron text-center">
            <div class="container">
                <h1 class="jumbotron-heading text-primary mb-4">
                    <a href="">Verify Utils</a>
                </h1>
                <p class="lead text-muted">
                    verify Utils 为记录在工作中用到，学习到的一些常用数字，字符校验的一个记录集,
                </p>
                <p>有收集自网页，有自己写的... </p>
                <p class="lead text-muted">这里整理出来各位同学可以方便使用</p>
                <p>
                    <a href="https://gitee.com/zhuzhaofeng/verifyUtils/blob/master/README.md" target="_back" class="btn btn-primary my-2 px-5">Doc</a>
                </p>
            </div>
        </section>
    </main>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h3 class="text-primary text-primary text-center">Example</h3>
                <div class="page-header col-12 col-sm-10 col-md-6 mb-3 mx-auto">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">
                                数字校验
                            </span>
                        </div>
                        <input type="text" id="num" class="form-control" placeholder="键入校验值">
                        <div class="input-group-append">
                            <button class="btn btn-outline-primary" onclick="verify('num')" type="button">校验</button>
                        </div>
                    </div>
                    <small class="form-text text-warning">验证纯数字(0-正无穷).</small>
                </div>
                <div class="page-header col-12 col-sm-10 col-md-6 mb-3 mx-auto">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">
                                正整数
                            </span>
                        </div>
                        <input type="text" id="posNum" class="form-control" placeholder="键入校验值">
                        <div class="input-group-append">
                            <button class="btn btn-outline-primary" onclick="verify('posNum')" type="button">校验</button>
                        </div>
                    </div>
                    <small class="form-text text-warning">验证正整数(正整数 + 0).</small>
                </div>
                <div class="page-header col-12 col-sm-10 col-md-6 mb-3 mx-auto">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">
                                负整数
                            </span>
                        </div>
                        <input type="text" id="negNum" class="form-control" placeholder="键入校验值">
                        <div class="input-group-append">
                            <button class="btn btn-outline-primary" onclick="verify('negNum')" type="button">校验</button>
                        </div>
                    </div>
                    <small class="form-text text-warning">验证负整数(负整数 + 0).</small>
                </div>
                <div class="page-header col-12 col-sm-10 col-md-6 mb-3 mx-auto">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">
                                两位小数的正实数
                            </span>
                        </div>
                        <input type="text" id="tdppInt" class="form-control" placeholder="键入校验值">
                        <div class="input-group-append">
                            <button class="btn btn-outline-primary" onclick="verify('tdppInt')"
                                type="button">校验</button>
                        </div>
                    </div>
                    <small class="form-text text-warning">两位小数的正实数.</small>
                </div>
                <div class="page-header col-12 col-sm-10 col-md-6 mb-3 mx-auto">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">
                                固定位数的数字
                            </span>
                        </div>
                        <input type="text" id="fixedDigitsNum" class="form-control" placeholder="键入校验值">
                        <input type="text" id="digits" class="form-control" placeholder="键入校验位数">
                        <div class="input-group-append">
                            <button class="btn btn-outline-primary" onclick="verify('fixedDigitsNum')"
                                type="button">校验</button>
                        </div>
                    </div>
                    <small class="form-text text-warning">验证固定位数的数字.</small>
                </div>
                <div class="page-header col-12 col-sm-10 col-md-6 mb-3 mx-auto">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">
                                纯中文
                            </span>
                        </div>
                        <input type="text" id="zh" class="form-control" placeholder="键入校验值">
                        <div class="input-group-append">
                            <button class="btn btn-outline-primary" onclick="verify('zh')"
                                type="button">校验</button>
                        </div>
                    </div>
                    <small class="form-text text-warning">纯中文校验.</small>
                </div>
                <div class="page-header col-12 col-sm-10 col-md-6 mb-3 mx-auto">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">
                                邮箱校验
                            </span>
                        </div>
                        <input type="text" id="email" class="form-control" placeholder="键入校验值">
                        <div class="input-group-append">
                            <button class="btn btn-outline-primary" onclick="verify('email')"
                                type="button">校验</button>
                        </div>
                    </div>
                    <small class="form-text text-warning">邮箱校验</small>
                </div>
                <div class="page-header col-12 col-sm-10 col-md-6 mb-3 mx-auto">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">
                                手机号码
                            </span>
                        </div>
                        <input type="text" id="phone" class="form-control" placeholder="键入校验值">
                        <div class="input-group-append">
                            <button class="btn btn-outline-primary" onclick="verify('phone')"
                                type="button">校验</button>
                        </div>
                    </div>
                    <small class="form-text text-warning">手机号码校验</small>
                </div>

                <div class="page-header col-12 col-sm-10 col-md-6 mb-3 mx-auto">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">
                                密码
                            </span>
                        </div>
                        <input type="text" id="pwd" class="form-control" placeholder="键入校验值">
                        <div class="input-group-append">
                            <button class="btn btn-outline-primary" onclick="verify('pwd')"
                                type="button">校验</button>
                        </div>
                    </div>
                    <small class="form-text text-warning">校验密码</small>
                </div>
                <div class="page-header col-12 col-sm-10 col-md-6 mb-3 mx-auto">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">
                                身份证号
                            </span>
                        </div>
                        <input type="text" id="idCard" class="form-control" placeholder="键入校验值">
                        <div class="input-group-append">
                            <button class="btn btn-outline-primary" onclick="verify('idCard')"
                                type="button">校验</button>
                        </div>
                    </div>
                    <small class="form-text text-warning">身份证号合法性验证</small>
                </div>
                <div class="page-header col-12 col-sm-10 col-md-6 mb-3 mx-auto">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">
                                大小写英文字母
                            </span>
                        </div>
                        <input type="text" id="letter" class="form-control" placeholder="键入校验值">
                        <div class="input-group-append">
                            <button class="btn btn-outline-primary" onclick="verify('letter')"
                                type="button">校验</button>
                        </div>
                    </div>
                    <small class="form-text text-warning">验证只由26个英文字母组成的字符串(包含大小写)</small>
                </div>
                <div class="page-header col-12 col-sm-10 col-md-6 mb-3 mx-auto">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">
                                小写英文字母
                            </span>
                        </div>
                        <input type="text" id="lowerCaseLetters" class="form-control" placeholder="键入校验值">
                        <div class="input-group-append">
                            <button class="btn btn-outline-primary" onclick="verify('lowerCaseLetters')"
                                type="button">校验</button>
                        </div>
                    </div>
                    <small class="form-text text-warning">验证只由26个小写英文字母组成的字符串</small>
                </div>
                <div class="page-header col-12 col-sm-10 col-md-6 mb-3 mx-auto">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">
                                大写英文字母
                            </span>
                        </div>
                        <input type="text" id="upperCaseLetter" class="form-control" placeholder="键入校验值">
                        <div class="input-group-append">
                            <button class="btn btn-outline-primary" onclick="verify('upperCaseLetter')"
                                type="button">校验</button>
                        </div>
                    </div>
                    <small class="form-text text-warning">验证26个大写英文字母组成的字符串</small>
                </div>
                <div class="page-header col-12 col-sm-10 col-md-6 mb-3 mx-auto">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">
                                自定义
                            </span>
                        </div>
                        <input type="text" id="reg" class="form-control" placeholder="键入校验规则">
                        <input type="text" id="custom" class="form-control" placeholder="键入校验值">
                        <div class="input-group-append">
                            <button class="btn btn-outline-primary" onclick="verify('custom')"
                                type="button">校验</button>
                        </div>
                    </div>
                    <small class="form-text text-warning">自定义校验规则</small>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
    <script>
        function verify(arg) {
            let verifyContent = $('#' + arg).val();
            let result;
            switch (arg) {
                case 'num':
                    result = verifyUtils.num(verifyContent);
                    swal("Verify Utils Tips", result.msg, result.state ? "success" : 'error')
                    break;
                case 'tdppInt':
                    result = verifyUtils.tdppInt(verifyContent);
                    swal("Verify Utils Tips", result.msg, result.state ? "success" : 'error')
                    break;
                case 'zh':
                    result = verifyUtils.zh(verifyContent);
                    swal("Verify Utils Tips", result.msg, result.state ? "success" : 'error')
                    break;
                case 'email':
                    result = verifyUtils.email(verifyContent);
                    swal("Verify Utils Tips", result.msg, result.state ? "success" : 'error')
                    break;
                case 'posNum':
                    result = verifyUtils.posNum(verifyContent);
                    swal("Verify Utils Tips", result.msg, result.state ? "success" : 'error')
                    break;
                case 'negNum':
                    result = verifyUtils.negNum(verifyContent);
                    swal("Verify Utils Tips", result.msg, result.state ? "success" : 'error')
                    break;
                case 'fixedDigitsNum':
                    let digits = $('#digits').val();
                    result = verifyUtils.fixedDigitsNum(verifyContent,digits);
                    swal("Verify Utils Tips", result.msg, result.state ? "success" : 'error')
                    break;
                case 'phone':
                    result = verifyUtils.phone(verifyContent);
                    swal("Verify Utils Tips", result.msg, result.state ? "success" : 'error')
                    break;
                case 'pwd':
                    result = verifyUtils.pwd(verifyContent);
                    swal("Verify Utils Tips", result.msg, result.state ? "success" : 'error')
                    break;
                case 'letter':
                    result = verifyUtils.letter(verifyContent);
                    swal("Verify Utils Tips", result.msg, result.state ? "success" : 'error')
                    break;
                case 'lowerCaseLetters':
                    result = verifyUtils.lowerCaseLetters(verifyContent);
                    swal("Verify Utils Tips", result.msg, result.state ? "success" : 'error')
                    break;
                case 'upperCaseLetter':
                    result = verifyUtils.upperCaseLetter(verifyContent);
                    swal("Verify Utils Tips", result.msg, result.state ? "success" : 'error')
                    break;
                case 'custom':
                    let reg = $('#reg').val();
                    result = verifyUtils.custom(reg,verifyContent);
                    swal("Verify Utils Tips", result.msg, result.state ? "success" : 'error')
                    break;
                default:
                    swal("Verify Utils Tips", 'ERROR!', 'error');
                    break
            }
        }
    </script>
</body>

</html>